<style>
    #febs-user-common {
        background-color:#f4f4f4;
        .jhg-body-search .layui-input-inline{
            width: 180px;
        }
        .eleTree-node-content-label{
            cursor: pointer;
        }
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="febs-proj-common" lay-title="项目选择" style="height: 100%">
    <div class="layui-row layui-col-space8 febs-container"style="height:calc( 100% - 10px)">

        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12" id="projTableContainer" style="height:100%">
            <div class="layui-card">
                <div class="layui-card-body febs-table-full">
                    <form class="jhg-body layui-form layui-table-form" lay-filter="proj-table-common-form" id="proj-table-common-form" >
                        <div class="jhg-body-search">
                            <div class="layui-form-item">
                                <div class="layui-inline" id="post-tenant" th:if="${hasHeadCompanyRole }">
                                    <label class="layui-form-label layui-form-label-sm">公司名称</label>
                                    <div class="layui-input-inline" >
                                        <select name="tenantSelect" id="tenantSelect" lay-search="" t>
                                            <option th:each="item:${tenantList }"
                                                    th:value="${item.tenantId}" th:text="${item.tenantName}"
                                                    th:selected="${currentTenantId ==item.tenantId}">
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label layui-form-label-sm">项目类型</label>
                                    <div class="layui-input-inline">
                                        <select name="projectType">
                                            <option value="">全部</option>
                                            <option value="1">修理项目</option>
                                            <option value="2">建造项目</option>
                                            <option value="3">内场项目</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label layui-form-label-sm">项目名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="projectName" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label layui-form-label-sm">项目状态</label>
                                    <div class="layui-input-inline">
                                        <select name="status">
                                            <option value="">全部</option>
                                            <option value="1">在建</option>
                                            <option value="2">已交付</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div id="query" class="layui-btn">
                                        <em class="layui-icon">&#xe615;</em> 查询
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="jhg-body-table">
                        <table lay-filter="projTableCommon" lay-data="{id: 'projTable'}"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-inline="none" type="text/javascript">
    layui.use(['dropdown', 'jquery', 'laydate', 'commonJS', 'form', 'table', 'febs'], function () {
        var $ = layui.jquery,
            febs = layui.febs,
            form = layui.form,
            table = layui.table,
            $view = $('#febs-proj-common'),
            $query = $view.find('#query'),
            $searchForm = $view.find('#proj-table-common-form'),
            tableIns;

        let tenantId =POPUP_DATA.tenantId;
        let selectList = POPUP_DATA.selectList
        form.render();

       $view.find("#projTableContainer").css("width","100%");

        initTable();
        autoHeight()

        function initTable() {
            tableIns = febs.table.init({
                elem: $view.find('table'),
                id: 'projTableCommon',
                skin: '',
                where:getQueryParams(),
                cols: [[
                    {type: 'radio'},
                    {field: 'projectName', title: '项目名称', width: 160,align:'center'},
                    { field: 'projectType',align:'center', title: '项目类型', width: 100, templet: function (d) {
                            var flg = '';
                            switch (d.projectType) {
                                case "1": {
                                    flg = '<span>修理项目</span>'
                                    break;
                                }
                                case "2": {
                                    flg = '<span>建造项目</span>'
                                    break;
                                }
                                case "3": {
                                    flg = '<span>内场项目</span>'
                                    break;
                                }
                            }
                            return flg;
                        }
                    },
                    {field: 'deptName', title: '项目区域', width: 240, templet: function (d) {
                            var span = "";
                            if(d.areaName && d.areaName.length>0){
                                var nameList = d.areaName.split(",");
                                nameList.forEach(item=> {
                                    span += "&nbsp;&nbsp;<span class='layui-badge febs-bg-green'>"+item+"</span>";
                                })
                            }
                            return span;
                    }},
                    {field: 'projectManageName', title: '项目负责人', width: 140},
                    {field: 'startDate', title: '开始周期', width: 240,align:'center',templet: function (d) {
                            return d.startDate + '~' +d.endDate;
                    }},
                    {field: 'status',align:'center', title: '项目状态', width: 100, templet: function (d) {
                            var flg = '';
                            if (d.status == '1') {
                                flg = '<span class="layui-badge febs-bg-cyan">在&nbsp;&nbsp;建</span>'
                            } else if (d.status == '2') {
                                flg = '<span class="layui-badge febs-bg-red">已交付</span>'
                            }
                            return flg;
                    }},
                    {field: 'sort',align:'center', title: '排序', width: 80},
                ]]
            });
            tableIns.reload({url: ctx + 'baseProject/list', where: getQueryParams(), page: {curr: 1}});
        }


        $query.on('click', function () {
            tableIns.reload({where: getQueryParams(), page: {curr: 1}});
        });


        function getQueryParams() {
            return {
                tenantId:$searchForm.find('select[name="tenantSelect"]').val(),
                projectType: $searchForm.find('select[name="projectType"]').val(),
                projectName: $searchForm.find('input[name="projectName"]').val()?.trim(),
                status: $searchForm.find('select[name="status"]').val(),
                invalidate_ie_cache: new Date()
            };
        }

        function autoHeight() {
            $view.find('.layui-card').height("100%");
        }

        $(window).resize(function () {
            autoHeight();
        });

        window.getSelectData = function(){
            let selData= table.checkStatus("projTableCommon")
            let returnData
            if(selData.data.length>0){
                returnData = {
                    projId:selData.data[0].projectId,
                    projName:selData.data[0].projectName,
                }
                if(null != selectList && valueExists(selectList,"userId",returnData.userId)){
                    returnData = null
                }

            }
            return returnData
        }

        function valueExists (arrayList,fieldName,value){
           let result = $.grep(arrayList,function (e){
                return e[fieldName] == value;
            })
            return result && result.length > 0;
        }
    })
</script>